.mb-15 {
  margin-bottom: 15px;
}

.inline {
  display: inline-block;
}

.ml-10 {
  margin-left: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.grid {
  display: grid;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.demo-img-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.code-preview .nt-header,
.code-preview .nt-footer {
  background-color: #c5e2ff;
}
.code-preview .nt-main {
  background-color: #ecf5ff;
}
.code-preview .nt-aside {
  background-color: #d9ecff;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-col {
  flex-flow: column nowrap;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.nt-tooltip--demo {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.nt-tooltip--demo {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #6a4a3c;

  padding: 1em;
  border-radius: min(var(--r), var(--p) - var(--b) / 2)
    min(var(--r), 100% - var(--p) - var(--b) / 2) var(--r) var(--r) / var(--r);
  clip-path: polygon(
    0 0,
    0 100%,
    100% 100%,
    100% 0,
    min(100%, var(--p) + var(--b) / 2) 0,
    var(--p) calc(-1 * var(--h)),
    max(0%, var(--p) - var(--b) / 2) 0
  );
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(
      100% - var(--p) - var(--b) / 2
    ) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;
}
.nt-tooltip-bottom.nt-tooltip--demo {
  top: calc(100% + 20px);
}

.nt-polygon-rhombus {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.nt-btn-blue {
  --nt-btn-border-color: #1677ff;
  --nt-btn-hover-border-color: #4096ff;
  --nt-btn-active-border-color: #0958d9;
}

.nt-btn-gradient {
  border: none;
  --nt-btn-color: #389e0d;
  --nt-btn-active-color: #0fd850;
  --nt-btn-background: linear-gradient(90deg, #0fd850 0%, #f9f047 100%);
  --nt-btn-hover-background: linear-gradient(90deg, #2af06a 0%, #fbf478 100%);
  --nt-btn-active-background: linear-gradient(90deg, #0a9036 0%, #ece008 100%);
}

#app {
  .icon-list {
    display: inline-grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    column-gap: 0;
  }
  .icon-item {
    width: 100px;
    height: 90px;
    cursor: pointer;
    background-color: #fff;
    color: #666;
    transition: background-color 0.3s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    &:hover {
      background-color: #f5f5f5;
    }

    .nt-icon {
      font-size: 20px;
    }
  }

  .icon-name {
    font-size: 14px;
    margin-top: 5px;
  }

  .nt-table {
    display: table;
    margin: 0;
    border-collapse: collapse;

    tr {
      border-top: none;
    }

    td,
    th {
      border: none;
      border-bottom: 1px solid #e6e6e6;
    }
  }
  .nt-table-border {
    th,
    td {
      border: 1px solid #e6e6e6;
    }
  }

  .nt-pagination {
    list-style: none;
    margin: 0;
    padding: 0;

    li + li {
      margin-top: 0;
    }
  }
}

@media screen and (max-width: 768px) {
  #app {
    .icon-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

.loading-bar-demo {
  height: 100px;
  border: 1px solid #4998f4;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-form-wrapper {
  width: 400px;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  padding: 15px;
}

.loading-demo {
  height: 200px;
  border: 1px solid #dedede;
  border-radius: 10px;
  padding: 10px;
}

.list-wrapper {
  height: 300px;
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #dedede;
}
.popover-p-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

select {
  appearance: auto;
}
